<template>
  <div class="head-bar">
    <yk-space align="center" :size="12" style="cursor: pointer;" @click="backHome">
      <img src="../../assets/logo.svg" alt="" />
      <span class="name">博客管理后台</span>
    </yk-space>

    <yk-space align="center" size="xl">
      <yk-badge>
        <iconMailOutline style="font-size: 20px;"/>
      </yk-badge>
      <yk-avatar img-url="https://www.huohuo90.com:3003/user/6353b034dd4b583975e77fbe.png"></yk-avatar>
      <div><yk-theme /></div>
      <yk-button type="primary" >退出</yk-button>
    </yk-space>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();

// 返回总览
const backHome = ()=>[
  router.push('/')
]

</script>

<style scoped lang="less">
.head-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: @bg-color-l;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 @space-xl;
  .name{
    font-size: 20px;
    font-weight: 600;
  }
}
</style>
